<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>NBA前十排名球员信息</title>
        <script src="/static/js/jquery.min.js"></script>
        <script type="text/javascript" src="/static/js/echarts-all-3.js"></script>
        <script src="/static/js/echarts.min.js"></script>
        <script src="/static/js/china.js"></script>
        <script src="/static/js/world.js"></script>
        <link rel="stylesheet" href="/static/css/main.css" rel="stylesheet">
        <script src="/static/js/vue.js"></script>
        <script src="/static/js/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="title">NBA前十排名球员信息</div>
            <!--<div id="time">我是时间</div>-->
            <div id="l1">我是左1</div>
            <div id="l2">我是左2</div>
            <!--            <div id="c1">
                            <div class="num"><h1>123</h1></div>
                            <div class="num"><h1>123</h1></div>
                            <div class="num"><h1>123</h1></div>
                            <div class="num"><h1>123</h1></div>
                            <div class="txt"><h2>累计确诊</h2></div>
                            <div class="txt"><h2>累计治愈</h2></div>
                            <div class="txt"><h2>累计死亡</h2></div>
                            <div class="txt"><h2>现存确诊</h2></div>
                        </div>-->
            <div id="c1">
                <table class="tableStyle">
                    <tr class="title">
                        <th>排名</th>
                        <th>姓名</th>
                        <th>球队</th>
                        <th>得分</th>
                    </tr>
                    <tr v-for="list in rankingList" align="center" class="content">
                        <td>{{ list.ranks }}</td>
                        <td>{{list.player}}</td>
                        <td>{{list.team}}</td>
                        <td>{{list.score}}</td>
                    </tr>
                </table>
            </div>
            <!--            <div id="c2">大屏中间第二幅图——中国疫情地图</div>-->
            <div id="r1">大屏右侧第一幅图</div>
            <div id="r2">大屏中间第二幅图</div>
            <script src="/static/js/ec_c1.js"></script>
            <script src="/static/js/ec_c2.js"></script>
            <script src="/static/js/controller.js"></script>
            <script src="/static/js/ec_l1.js"></script>
            <script src="/static/js/ec_l2.js"></script>
            <script src="/static/js/ec_r1.js"></script>
            <script src="/static/js/ec_r2.js"></script>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false

            new Vue({
                el: '#c1',
                data: {
                    rankingList: {
                        id: [],
                        ranks: [],
                        player: [],
                        team: [],
                        score: []
                    }
                },
                methods: {
                    getRankingList() {
                        axios.get('http://localhost:8080/player/rankingList').then(response => {
                            console.log("ranking --->" + response.data)
                            this.rankingList = response.data
                            console.log(this.rankingList)

                            this.rankingList.id = []
                            this.rankingList.ranks = []
                            this.rankingList.player = []
                            this.rankingList.team = []
                            this.rankingList.score = []
                            for (var i = 0; i < this.rankingList.length; i++) {

                                this.rankingList.id.push(this.rankingList[i].id);
                                this.rankingList.ranks.push(this.rankingList[i].ranks);
                                this.rankingList.player.push(this.rankingList[i].player);
                                this.rankingList.team.push(this.rankingList[i].team);
                                this.rankingList.score.push(this.rankingList[i].score);
                            }
                            console.log("----------" + this.rankingList.ranks)
                        })
                    }
                },
                created() {
                    this.getRankingList();
                }
            })
        </script>
    </body>


</html>